<template>
  <section>
    <drag-hotspots
      ref="dragHotspots"
      :config="hotspotsConfig"
      :changeEvt="saveHotspots"
      @tabDrag="tabDrag"
    ></drag-hotspots>
    <div class="custorm--modelbox graphicimgs-edit">
      <renohome-right-nav
        :custormItemData="custormItemData"
        @rightNavChange="rightNavChange"
      ></renohome-right-nav>
      <section>
        <div class="es-form-item">
          <div class="form-label mb-20">添加图片</div>
          <div class="ivu-alert"> <span>建议图片宽度750，高度200-950，支持jpg、png。</span></div>
          <div>
            <div
              class="item"
              draggable="false"
            >
              <i
                class="el-icon-circle-close  delete-child"
                @click="custormItemData.data = [];custormItemData.params.thumb = {file_path: 'default_banner.png'}"
              ></i>
              <div class="item-inner "><span class="labeltext">图片</span>
                <div
                  typetext="图片"
                  show="0"
                  class="small"
                  style="align-self: start;"
                >
                  <div class="uploadSource solid"><i
                      class="delete ivu-icon iconfont icon-input_clear"
                      style="font-size: 16px;"
                    ></i>
                    <div
                      class="img"
                      @click="uploadtoggle('image')"
                      :style="{'background-image':`url(${getPath(custormItemData.params.thumb && custormItemData.params.thumb.file_path ? custormItemData.params.thumb.file_path : 'default_banner.png')})`,'height':'50px','background-repeat':'no-repeat','background-size':'cover','background-position':'50%'}"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="goodscol-add"
            @click="setHotspots"
          >设置热区</div>
        </div>
      </section>
    </div>
  </section>
</template>

<script>
import DragHotspots from '@/components/DragHotspots/index'
import defaultConfig from './utils/editConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      currentIndex: -1,
      hotspotsConfig: {
        fixed: 0,
        bgImg: '',
        bgx: 0,
        bgy: 0,
        initList: []
      }
    }
  },
  computed: {
  },
  components: {
    DragHotspots
  },
  methods: {
    setHotspots() {
      (!Array.isArray(this.custormItemData.data)) && (this.custormItemData.data = [])
      if (this.custormItemData.params.thumb.file_path !== 'default_banner.png') {
        const { fixed, thumb: { file_path } } = this.custormItemData.params
        this.hotspotsConfig.fixed = fixed
        this.hotspotsConfig.bgImg = file_path
        const imgs = new Image()
        imgs.src = file_path
        imgs.onload = (file) => {
          const [{ width: x, height: y }] = file.path
          // console.log(height, width, 'file')
          this.hotspotsConfig.bgx = x
          this.hotspotsConfig.bgy = y
          this.hotspotsConfig.initList = []
          this.hotspotsConfig.initList = this.custormItemData.data
          this.$refs.dragHotspots.toggle()
        }
      } else {
        this.$message.error('请选择图片后设置热区!~')
      }
    },
    tabDrag(currentIndex) {
      if (currentIndex !== -1) {
        this.currentIndex = currentIndex
        this.uploadtoggle('link')
      }
    },
    saveHotspots(files) {
      const { displayData: [file_path] } = files
      if (file_path) {
        this.custormItemData.data = files.displayData
      }
      console.log(files, this.custormItemData, 'saveHotspots')
    },
    uploadFileCallBack(files) {
      const { key } = files
      if (key === 'ChooseLink') {
        const { currentRow: [file_path], displayData: [custorm] } = files
        if (this.currentIndex !== -1) {
          if (file_path) {
            this.$refs.dragHotspots.displayData[this.currentIndex]['link'] = file_path
          } else {
            if (custorm) {
              this.$refs.dragHotspots.displayData[this.currentIndex]['link'] = custorm
            } else {
              this.$message.error('请选择链接~!')
            }
          }
          console.log(this.$refs.dragHotspots.displayData[this.currentIndex]['link'], 'this.currentIndex=>uploadFileCallBack')
        }
        console.log(this.$refs.dragHotspots.displayData, 'this.currentIndex=>this.currentIndex')
      } else if (key === 'ChooseFiles') {
        const { displayData: [file_path] } = files
        if (file_path) {
          this.custormItemData.params['thumb'] = file_path
          this.hotspotsConfig.bgImg = file_path.file_path
          if (this.hotspotsConfig.fixed === 0) {
            this.hotspotsConfig.fixed = this.custormItemData.params.fixed
          }
          this.hotspotsConfig.bgx = file_path.x
          this.hotspotsConfig.bgy = file_path.y
          this.custormItemData.data = []
        }
      }
      this.currentIndex = -1
    },
    uploadtoggle(type) {
      console.log('uploadtoggle')
      this.output({ type, params: { editKey: this.custormItemData.key } })
    }
  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.graphicimgs-edit {
  //列表开始
  .es-form-item {
    border-bottom: 5px solid #f6f7f9;
    padding: 20px 23px;
    font-size: 12px;

    .uploadSource {
      background: #fff;
      cursor: pointer;
    }

    .uploadSource {
      width: 50px;
      height: 50px;
      line-height: 50px;
      margin-right: 0;
      border: 1px dashed #ededed;
      text-align: center;
      color: #dad9d9;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      float: left;
      position: relative;
    }
  }

  .es-form-item:last-child {
    border-bottom: 0;
  }

  .es-form-item .item-inner {
    margin-top: 8px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .es-form-item .item-inner:first-of-type {
    margin-top: 0;
  }

  .es-form-item .button-img {
    width: 32px;
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    line-height: 36px;
    text-align: center;
    border: 1px solid transparent;
  }

  .es-form-item .button-img.block {
    width: 100%;
    position: relative;
    min-height: 32px;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .es-form-item .button-img.active {
    border-color: #fb6638 !important;
  }

  .es-form-item [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  .es-form-item .opacity-0 {
    opacity: 0;
  }

  .es-form-item .button-img .opacity-0 {
    width: 0;
    height: 0;
    position: absolute;
  }

  .es-form-item .alignC {
    text-align: center;
  }

  .es-form-item .item {
    background: #f6f7f9;
    padding: 10px 20px 10px 10px;
    border: 1px solid #eee;
    color: #999;
    position: relative;
    margin-bottom: 20px;
  }

  .es-form-item .labeltext {
    width: 40px;
    text-align: right;
    padding-right: 8px;
    color: #666;
  }

  .es-form-item .item-inner .readonly-div {
    position: relative;
    flex-grow: 1;
  }

  .ivu-input-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: middle;
    line-height: normal;
  }

  .es-form-item .item-inner .readonly-div .readonly input {
    background: #e8effc;
    border: 0;
    padding-left: 18px;
    cursor: pointer;
    box-sizing: border-box;
  }

  .es-form-item .item-inner .readonly-div .readonly-icon {
    position: absolute;
    top: 5px;
    left: 12px;
  }

  .es-form-item .item .delete-child {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    font-size: 14px;
  }

  //列表结束

  .txbox {
    border-radius: 3px;
    border: 1px solid transparent;
    margin: 0 15px 0 13px;
    height: 32px;
    width: 32px;
    cursor: pointer;
  }

  .txbox img {
    max-width: 17px;
    max-height: 17px;
  }

  .txbox.active {
    border-color: #409eff;
  }

  .yzt {
    background: #dcdcdc;
    height: 15px;
    width: 26px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
  }

  .cft {
    background: #dcdcdc;
    height: 15px;
    width: 25px;
  }

  .yuan {
    background: #dcdcdc;
    height: 15px;
    width: 15px;
    border-radius: 15px;
  }

  .ivu-alert {
    position: relative;
    padding: 8px 16px;
    border-radius: 6px;
    color: #666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }
}
</style>
